<template>
	<view class="content">
		<view class="menu-block block">
			<view class="title-top">
				<view class="title">
					{{detail.trainInstitution}}
				</view>
			</view>
			<view class="iphone-content" style="margin-bottom: 10rpx;">
				<view class="data" style="border-bottom: 1px solid #EEEEEE;padding-bottom: 30rpx;">
					<view class="money-title" style="width: 45rpx;">
						<image src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/address1.png" style="width: 100%;height: 100%;"></image>
					</view>
					<view class="count">
						{{detail.trainAddress}}
					</view>
				</view>
				<view class="iconfont">
					<image class="img" src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/distance1.png"></image>
					<view class="play" style="text-align: center;">{{detail.distance}}km</view>
				</view>
			</view>
			<view class="iphone-content">
				<view class="data">
					<view class="money-title">
						<image src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/phone.png" style="width: 100%;height: 100%;"></image>
					</view>
					<view class="count">
						{{detail.trainPhone}}
					</view>
				</view>
				<view class="iconfont" @click="callPhone(detail.trainPhone)">
					<image class="img" src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/dial.png"></image>
					<view class="play" style="text-align: center;">拨打</view>
				</view>
			</view>
		</view>
		<view class="menu-block block">
			<view class="title-top">
				<view class="tips"></view>
				<view class="title">
					培训种类
				</view>
			</view>
			<view class="item">
				创业培训：
				<template v-if="entrepreneurshipTrain!=''">
					<view class="skill-item" v-for="item in entrepreneurshipTrain" :key="item.id" @click="navigate('/page_other/train/kind?id='+item.id)">
						{{item.specialityText}}
					</view>
				</template>
				<view v-else style="margin-left: 20rpx;">
					暂无
				</view>
			</view>
			<view class="item">
				技能培训：
				<template v-if="skillTrain!=''">
				<!-- <template> -->
					<view class="skill-item" v-for="item in skillTrain" :key="item.id" @click="navigate('/page_other/train/kind?id='+item.id)">
						{{item.specialityText}}
					</view>
				</template>
				<view v-else style="margin-left: 20rpx;">
					暂无
				</view>
			</view>
		</view>
		<view class="menu-block block">
			<view class="title-top">
				<view class="tips"></view>
				<view class="title">
					基本介绍
				</view>
			</view>
			<view class="text">
				<mp-html :content="detail.basicIntroduction"/>
			</view>
		</view>
		<view class="step" @click="navigate1(detail)" v-if="entrepreneurshipTrain!='' || skillTrain!=''">
		<!-- <view class="step" @click="navigate1(detail)" v-if="skillTrain.length>0 && entrepreneurshipTrain.length>0"> -->
			立即报名
		</view>
	</view>
</template>

<script>
	import {
		getTrainByIdApi,
	} from '@/api/train.js';
	export default {
		data() {
			return {
				iStrue: false,
				iSinfo: false,
				//创业
				entrepreneurshipTrain: [],
				//技能
				skillTrain: [],
				id: 1,
				latitude: null,
				longitude: null,
				detail:{
					id: 0,
					trainInstitution: '',
					trainAddress: '',
					distance: '',
					trainPhone: '',
					basicIntroduction:'',
					
					
				}
			}
		},
		methods: {
			callPhone(e) {
				uni.makePhoneCall({
					phoneNumber: e,
					success() {
						console.log('拨打成功了');
					},
					fail() {
						console.log('拨打失败了');
					}
				})
			},
			getTrainByIdApi() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getTrainByIdApi({
					id:this.id,
					latitude:this.latitude,
					longitude:this.longitude
				}).then(data => {
					uni.hideLoading()
					this.detail = data
					this.entrepreneurshipTrain = data.entrepreneurshipTrain.list
					this.skillTrain = data.skillTrain.list
				}).catch(() => {
					uni.hideLoading()
				})
			},
			showinfo() {
				this.iSinfo = !this.iSinfo
			},
			showTrue() {
				this.iStrue = !this.iStrue
			},
			navigate(url) {
				uni.navigateTo({
					url
				})
			},
			navigate1(index) {
				uni.navigateTo({
					url: `/page_other/train/entrepreneurTrain/apply?id=${this.detail.id}&city=${this.detail.city}`
				})
			},
			search() {
				this.more = true
				// this.getList(true)
				this.getTrainByIdApi()
			},
		},
		onLoad(e) {
			this.id = e.id
			this.latitude = e.latitude
			this.longitude = e.longitude
			this.getTrainByIdApi()
		}
	}
</script>

<style lang="scss" scoped>
	.step{
		width: 350rpx;
		height: 100rpx;
		display: flex;
		background-color: red;
		color: #fff;
		margin: 30rpx auto;
		border-radius: 60rpx;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 30rpx;
		right: 215rpx;
	}
	.menu-block {
		width: 92%;
		margin: 40rpx auto;
		background: #fff;
		border-radius: 12px;
		padding: 30rpx;
		.text{
			line-height: 60rpx;
		}
		.item{
			margin-top: 10rpx;
			width: 100%;
			font-size: 28rpx;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			.skill-item{
				height: 50rpx;
				border-radius: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #FFE6E7;
				color: red;
				margin: 0 20rpx;
				padding: 0 20rpx;
			}
		}
		.skill{
			display: flex;
			flex: wrap;
		}
		.title-top{
			display: flex;
			.tips{
				width: 18rpx;
				height: 32rpx;
				border-radius: 20rpx;
				background-color: #0256FF;
				margin: 16rpx 12rpx 0 0;
			}
			
			.title{
				font-weight: 900;
				font-size: 32rpx;
				line-height: 60rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				margin-bottom: 25rpx;
			}
			
		}
		
		.data{
			width: calc((100% - 150rpx));
			display:flex;
			color: #767676;
			font-size: 28rpx;
			color: #000;
			margin-top: 35rpx;
		}
		.count{
			margin: 0 0 0 10rpx;
			width: calc(100% - 30rpx);
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
		.project-content{
			line-height: 60rpx;
		}
		.iphone-content{
			display: flex;
			justify-content: space-between;
			.money-title{
				width: 44rpx;
				height: 42rpx;
			}
			.iconfont{
				width: 120rpx;
				font-size: 28rpx;
				color: #767676;
				
				.img{
					margin: 0 auto 10rpx;
					width: 50rpx;
					height: 50rpx;
				}
			}
		}
	}
</style>